<script lang="ts" setup>
import OrderCard from './OrderCard.vue'
import { useUserStore } from '@/stores'
import { OrderApi } from '@/apis'

const props = defineProps<{
  canceled?: boolean
  status?: string[]
}>()

const userStore = useUserStore()

// 搜索表单
const query = reactive<OrderApi.OrderQuery>({
  studentId: userStore.currentStudent.id,
  status: props.status,
})

const { reload, loadmore, records, status, contentText } = usePagination(page => OrderApi.getOrderPage({ ...query, ...page }))
onReachBottom(() => {
  loadmore()
})

onPullDownRefresh(async () => {
  await reload()
  uni.stopPullDownRefresh()
})

onShow(() => {
  reload()
})
</script>

<template>
  <view class="bg-[#f8f8f8]">
    <view class="p-30rpx">
      <view v-for="(item, index) in records" :key="item" class="mt-[24rpx]" :style="index === 0 ? 'margin-top:0' : ''">
        <OrderCard :data="item" @change="reload" />
      </view>
      <view v-if="!records.length">
        <wd-status-tip image="content" tip="暂无订单" />
      </view>
      <uni-load-more v-if="records.length" :status="status" :content-text="contentText" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
</style>
